var upUrl = './images/up.png';
var downUrl = './images/down.png';

function main() {
    var params = {};
    var timeType = 'week';
    var params = {};
    var TIMESTAMP = 24 * 60 * 60 * 1000;
    $('#timeBtn a').on('click', function (e) {
        $('#timeBtn a').removeClass('active');
        $(this).addClass('active');
        timeType = $(e.target).data('type');
        init();
    });

    function init() {
        // 时间类型
        var startTime = '';
        var endTime = '';
        var qoqStartTime = '';
        var qoqEndTime = '';
        var date = new Date();

        if (timeType === 'week') {
            startTime = new Date(date - 8 * TIMESTAMP).format('yyyy-MM-dd') + ' 00:00:00';
            endTime = new Date(date - 2 * TIMESTAMP).format('yyyy-MM-dd') + ' 23:59:59';
            qoqStartTime = new Date(date - 15 * TIMESTAMP).format('yyyy-MM-dd') + ' 00:00:00';
            qoqEndTime = new Date(date - 9 * TIMESTAMP).format('yyyy-MM-dd') + ' 23:59:59';
        } else {
            startTime = new Date(date - 31 * TIMESTAMP).format('yyyy-MM-dd') + ' 00:00:00';
            endTime = new Date(date - 2 * TIMESTAMP).format('yyyy-MM-dd') + ' 23:59:59';
            qoqStartTime = new Date(date - 61 * TIMESTAMP).format('yyyy-MM-dd') + ' 00:00:00';
            qoqEndTime = new Date(date - 32 * TIMESTAMP).format('yyyy-MM-dd') + ' 23:59:59';
        }
        params.startTime = startTime;
        params.endTime = endTime;
        params.qoqStartTime = qoqStartTime;
        params.qoqEndTime = qoqEndTime;

        console.log(params);

        renderChart01();
        renderChart02();
        renderChart03();
        renderTable01();
        renderTable02();
        renderTable03();
        renderTable04();
        $('#rightTable03 .main-head-btn').on('click', function() {
            if ($(this).hasClass('active')) {
                return
            }
            $('#rightTable03 .main-head-btn').removeClass('active')
            $(this).addClass('active')
            renderChart03();
        });
    }

    init();

    function renderChart01() {
        var rank = 1;
        var userExperienceScore = 1.3336;
        var scoreRate = -4.88;
        userExperienceScore = parseNum(userExperienceScore);
        scoreRate = parseNum(scoreRate)
        $('#chart01_rank').html(rank);
        $('#chart01_userExperienceScore').html(userExperienceScore);
        var scoreStr = '';
        if (parseFloat(scoreRate) > 0) {
            scoreStr = parseNum(scoreRate) + '%' + '<img src="'+ upUrl +'" style="margin-left: 5px;">';
            document.getElementById('chart01_scoreRate').className = 'main-info-value color-red';
        } else if (parseFloat(scoreRate) < 0) {
            scoreStr = parseNum(scoreRate) + '%' + '<img src="'+ downUrl +'" style="margin-left: 5px;">';
            document.getElementById('chart01_scoreRate').className = 'main-info-value color-green';
        } else {
            scoreStr = parseNum(scoreRate) + '%';
            document.getElementById('chart01_scoreRate').className = 'main-info-value color-red';
        }
        $('#chart01_scoreRate').html(scoreStr);
        
    }

    function renderChart02() {
        function renderChart() {

        }

        function renderTable() {
            var result = [
                { score: 3, scoreQoq: 3.1, name: '品牌认识', },
                { score: 3, scoreQoq: 2.9, name: '需求触发', },
                { score: 3, scoreQoq: 3, name: '搜索了解', },
                { score: 3, scoreQoq: 3.1, name: '产品介绍', },
                { score: 3, scoreQoq: 3.1, name: '咨询服务', },
                { score: 3, scoreQoq: 3.1, name: '付款', },
                { score: 3, scoreQoq: 3.1, name: '安排送货', },
                { score: 3, scoreQoq: 3.1, name: '安排安装', },
                { score: 3, scoreQoq: 3.1, name: '日常使用', },
                { score: 3, scoreQoq: 3.1, name: '产品维护', },
                { score: 3, scoreQoq: 3.1, name: '产品复购', },
            ]
            var $container = $('#leftTable01');
            var headStr = '';
            var bodyStr = '';
            bodyStr += '<tr>';
            result.forEach(function (item) {
                var len = result.length;
                var width = parseNum(100 / len) + '%';
                var difference = parseNum(item.score - item.scoreQoq);
                // thead
                headStr += '<th style="width: '+ width +';">';
                if (difference > 0) {
                    headStr += '<span class="color-red">' + difference + '</span>';
                } else if (difference < 0) {
                    headStr += '<span class="color-green">' + difference + '</span>';
                } else {
                    headStr += '<span>' + difference + '</span>';
                }
                headStr += '</th>';

                // tbody
                bodyStr += '<td>';
                if (difference > 0) {
                    bodyStr += '<img src="'+ upUrl +'">';
                } else if (difference < 0) {
                    bodyStr += '<img src="'+ downUrl +'">';
                } else {
                    bodyStr += '<span style="font-size: 20px;">-</span>';
                }
                bodyStr += '</td>';
            });
            bodyStr += '</tr>';
            $container.find('thead').html(headStr);
            $container.find('tbody').html(bodyStr);
        }
        renderChart();
        renderTable();
    }

    function renderChart03() {

    }

    function renderTable01() {
        var str = '';
        var max = 5;
        var result = [
            { rank: 1, brand: '格力', score: 4.8, rankImprove: 0, },
            { rank: 2, brand: '奥克斯', score: 4.4, rankImprove: 0, },
            { rank: 3, brand: '海尔', score: 3.88, rankImprove: 0, },
            { rank: 4, brand: '九阳', score: 3.2, rankImprove: -1, },
            { rank: 5, brand: '苏泊尔', score: 2.5, rankImprove: 1, },
        ]
        result.forEach(function (item, index) {
            var rate = parseNum(item.score / max, true);
            str += '<tr>';
            if (index < 3) {
                str += '<td><img class="rank-img" src="./images/rank-0' + item.rank + '.png">' +'</td>';
            } else {
                str += '<td>'+ item.rank +'</td>';
            }
            str += '<td>'+ item.brand +'</td>';
            str += '<td><div class="bar-bg"><div class="bar" style="width: '+ rate +';"></div><span class="bar-value">'+ item.score +'</span></div></td>';
            var improveStr = '';
            if (parseInt(item.rankImprove) > 0) {
                improveStr = '<div class="color-red rank-improve">' + item.rankImprove + '<img src="'+ upUrl+'" style="margin-left: 5px;"><div>';
            } else if(parseInt(item.rankImprove) < 0) {
                improveStr = '<div class="color-green rank-improve">' + item.rankImprove + '<img src="'+ downUrl+'" style="margin-left: 5px;"><div>';
            } else {
                improveStr = '<div class="rank-improve">' + item.rankImprove + '</div>';
            }
            str += '<td>'+ improveStr +'</td>';
            str += '</tr>';
        });
        $('#rightTable01 tbody').html(str);

    }

    function renderTable02() {
        var str = '';
        var max = 5;
        var result = [
            { rank: 1, brand: '冰箱', score: 4.8, rankImprove: 0, },
            { rank: 2, brand: '厨房电器', score: 4, rankImprove: 0, },
            { rank: 3, brand: '中央空调', score: 3.55, rankImprove: 0, },
            { rank: 4, brand: '家用空调', score: 3.1, rankImprove: -1, },
            { rank: 5, brand: '洗衣机', score: 2, rankImprove: 1, },
        ]
        result.forEach(function (item, index) {
            str += '<tr>';
            if (index < 3) {
                str += '<td><img class="rank-img" src="./images/rank-0' + item.rank + '.png">' +'</td>';
            } else {
                str += '<td>'+ item.rank +'</td>';
            }
            str += '<td>'+ item.brand +'</td>';

            // star-row
            var starWidth = 18;
            var rest = parseNum(item.score - Math.floor(item.score)) * starWidth + 'px';
            str += '<td><div class="star-row"><div class="star-bg">';
            for (var i = 0; i < Math.floor(item.score); i++) {
                str += '<div class="star"></div>';
            }
            str += '<div class="star" style="width: ' + rest + '"></div>';
            str += '</div><span class="star-value">'+ item.score +'</span></div></td>';

            var improveStr = '';
            if (parseInt(item.rankImprove) > 0) {
                improveStr = '<div class="color-red rank-improve">' + item.rankImprove + '<img src="'+ upUrl+'" style="margin-left: 5px;"><div>';
            } else if(parseInt(item.rankImprove) < 0) {
                improveStr = '<div class="color-green rank-improve">' + item.rankImprove + '<img src="'+ downUrl+'" style="margin-left: 5px;"><div>';
            } else {
                improveStr = '<div class="rank-improve">' + item.rankImprove + '</div>';
            }
            str += '<td>'+ improveStr +'</td>';
            str += '</tr>';
        });
        $('#rightTable02 tbody').html(str);
    }

    function renderTable03() {
        var str = '';
        var max = 5;
        var result = [
            { rank: 1, brand: '冰箱', score: 4.8, rankImprove: 0, },
            { rank: 2, brand: '厨房电器', score: 4, rankImprove: 0, },
            { rank: 3, brand: '中央空调', score: 3.55, rankImprove: 0, },
            { rank: 4, brand: '家用空调', score: 3.1, rankImprove: -1, },
            { rank: 5, brand: '洗衣机', score: 2, rankImprove: 1, },
        ]
        result.forEach(function (item, index) {
            str += '<tr>';
            str += '<td>'+ item.rank +'</td>';
            str += '<td>'+ item.brand +'</td>';
            str += '<td>'+ item.score +'</td>';
            str += '<td>'+ item.rankImprove +'</td>';
            str += '</tr>';
        });
         $('#rightTable03 tbody').html(str);
    }

    function renderTable04() {
        
    }

}

main();